<mat-accordion class="ngm-accordion" [displayMode]="props.displayMode" [hideToggle]="props.hideToggle"
  [multi]="props.expandedMulti"
  [togglePosition]="props.togglePosition ?? 'before'">
  @for (item of field.fieldGroup; track item.key) {
    <mat-expansion-panel #expansionPanel [class.mat-elevation-z]="props.elevationZ"
      [expanded]="!item.props.disabled && item.props.expanded"
      [disabled]="(item.hideExpression || item.props.toggleable) && !isShow(item)"
      >
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{item.props.label}}
        </mat-panel-title>
        <mat-panel-description class="flex-1">
          @if (item.hideExpression || item.props.toggleable) {
            <mat-slide-toggle labelPosition="before" ngm-density small
              [checked]="isShow(item)"
              (change)="onToggle($event, item, expansionPanel)"
              (click)="$event.stopPropagation();">
            </mat-slide-toggle>
          }
        </mat-panel-description>
        
      </mat-expansion-panel-header>

      <formly-field [field]="item"></formly-field>
      
    </mat-expansion-panel>
  }
</mat-accordion>
